import React from 'react'
import { 
  Menu
} from 'antd'
import { Link, Route ,Redirect } from "react-router-dom"
import Recmd  from '../recmd/recmd'
import Rankinglist from '../rankinglist/Rankinglist'
import "./findMusic.scss"

export default class Find extends React.Component {
 
  constructor() {
    super()
    this.state = {
      curren:'/find/recmd'
    }
  }

  handleClick = (e) => {
    console.log('click ', e);
    this.setState({
      current: e.key,
    });
  }

  render() {
    const menu = [
      { name:'推荐',path:'/find/recmd'},
      { name:'排行榜' ,path: '/find/rankingList'},
      { name:'歌单' ,path: '/find/musicList'},
      { name:'主播电台', path:'/radio' },
      { name:'歌手' , path: '/musician'},
      { name:'新碟上架' , path: '/newMusic'}
    ]
  
    const selectedK = this.props.location.pathname
    
    return <div id="find_music">
      <div className="find_nav">
        <Menu
          onClick={this.handleClick}
          selectedKeys={[this.state.current]}
          mode="horizontal"
          selectedKeys={ [selectedK] }
        >
          {
            menu.map((item)=><Menu.Item key={item.path}>
              <Link to={ item.path }>{item.name}</Link>
            </Menu.Item>)
          }
          
        </Menu>
      </div>
      <Route path="/find" exact render={ ()=><Redirect to="/find/recmd" /> }></Route>
      <Route exact path="/find/recmd" component={ Recmd }></Route>
      <Route exact path="/find/rankingList" component={ Rankinglist }></Route>
    </div>
  }
}
